<template>
    <div class="bg" @scroll="scr" ref="bigbox">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >书库
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <!--分类-->
        <div class="bar">
            <span class="bar-list" :class="{checked:index==i}" @touchstart="check(i)" v-for="(b,i) in barr" :key="i">{{b}}</span>
            <span class="fa fa-th-large menu" @touchstart="changeShowMenu"></span>
        </div>
        <p style="margin:96px 0 0 0"></p>

        <transition name="menushow">
            <div v-show="showmenu" style="padding: 10px 15px;text-align:left;background-color:white;z-index:3;position:fixed;top:96px">
                <div style="display:flex;margin:10px 0">
                    <span class="menu-name">分类:</span>
                    <div class="menu-data">
                        <span @touchstart="choseCategory(i)" :class="{chosee:index1==i}" v-for="(c,i) in category" :key="i">{{c}}</span>
                    </div>
                </div>
                <div style="display:flex;margin:10px 0">
                    <span class="menu-name">字数:</span>
                    <div class="menu-data">
                        <span @touchstart="choseNumber(i)" :class="{chosee:index2==i}" v-for="(n,i) in number" :key="i">{{n}}</span>
                    </div>
                </div>
                <div style="display:flex;margin:10px 0">
                    <span class="menu-name">进度:</span>
                    <div class="menu-data">
                        <span @touchstart="choseState(i)" :class="{chosee:index3==i}" v-for="(s,i) in statee" :key="i">{{s}}</span>
                    </div>
                </div>
            </div>
        </transition>
        

        <div class="novel" v-for="(b,i) in books" :key="i">
            <router-link :to="'/novel/'+b._id" style="display:flex">
                <div><img :src="'/api/images/books/'+b.avatar"></div>
                <div>
                    <p class="novel-title">{{b.name}}</p>
                    <span>{{b.category}} |</span><span>{{b.state}}</span><br>
                    <span class="novel-text">{{b.introduction}}</span>
                </div>
            </router-link>
        </div>

       <div v-show="showTop" @touchstart="aniToTop" class="fa fa-hand-o-up goTop"><p>回到顶部</p></div>

    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader,
        },
        data:function(){
            return {
                showTop:false,
                showmenu:false,
                barr:["默认","字数","阅读","推荐"],
                index:0,
                books:[],
                category:[],
                index1:0,
                number:[],
                index2:0,
                statee:[],
                index3:0,
                search:{
                    sort:{},
                    find:{}
                },
            }
        },
        methods:{
            changeShowMenu:function(){
                this.showmenu = !this.showmenu;
            },
            scr:function(e){
                // console.dir(e);
                if(e.target.scrollTop>=900){
                    this.showTop =true;
                }else{
                    this.showTop = false;
                }
                if(e.target.scrollHeight-e.target.offsetHeight==e.target.scrollTop){
                    // console.log(e.target.scrollHeight-e.target.offsetHeight)
                    var n = this.books.length/6;
                    this.http.post("/api/bookslist",{
                                page:n,
                                ...this.search
                                }
                        ).then(res=>{
                        if(res.data.data==""){
                            this.$vux.alert.show({
                                title:"木有了哦"
                            })
                        }else{
                            this.books.push(...(res.data.data))
                        }
                        
                    })
                }
                // console.log(e.target.scrollHeight);可以滚动的高度
                // console.log(e.target.scrollTop);滚动条到顶部高度
                // console.log(e.target.offsetHeight);页面高度
            },
            aniToTop:function(){
                var timer;
                var a =this;
                function update(){
                    a.$refs.bigbox.scrollTop-=80;
                    timer =requestAnimationFrame(update);
                    if(a.$refs.bigbox.scrollTop<=0){
                        cancelAnimationFrame(timer);
                    }
                }
                update();
            },
            check(i){
                this.index = i;
                delete this.search.sort._id;
                delete this.search.sort.number;
                delete this.search.sort.read;
                if(this.barr[i]=="默认"){
                    this.search.sort._id = -1;
                }
                if(this.barr[i]=="字数"){
                    this.search.sort.number = -1;
                }
                if(this.barr[i]=="阅读"){
                    this.search.sort.read = -1;
                }
                var s = {params:this.search};
                this.http.post("/api/bookslist",this.search).then(res=>{
                    this.books = res.data.data;
                })
            },
            choseCategory(i){
                this.index1 = i;
                delete this.search.find.category;
                if(i!=0){
                    this.search.find.category = this.category[i];
                }
                this.http.post("/api/bookslist",this.search).then(res=>{
                    this.books = res.data.data;
                })
                this.showmenu =false;
            },
            choseNumber(i){
                this.index2 = i;
                delete this.search.find.number;
                if(i!=0){
                    if(this.number[i]=="30万以下"){
                       this.search.find.number = {$lt:300000}; 
                    }
                    if(this.number[i]=="30万-50万"){
                       this.search.find.number = {$gte:300000,$lt:500000}; 
                    }
                    if(this.number[i]=="50万-100万"){
                       this.search.find.number = {$gte:500000,$lt:1000000}; 
                    }
                    if(this.number[i]=="100万-200万"){
                       this.search.find.number = {$gte:1000000,$lt:2000000}; 
                    }
                    if(this.number[i]=="200万以上"){
                       this.search.find.number = {$gte:2000000}; 
                    }
                }
                this.http.post("/api/bookslist",this.search).then(res=>{
                    this.books = res.data.data;
                });
                this.showmenu =false;
            },
            choseState(i){
                this.index3 = i;
                delete this.search.find.state;
                if(i!=0){
                    this.search.find.state = this.statee[i];
                }
                this.http.post("/api/bookslist",this.search).then(res=>{
                    this.books = res.data.data;
                });
                this.showmenu =false;
            }
        },
        mounted:function(){
            var find = this.$store.state.term;
            if(find){
                this.http.get("/api/sou",{params:{search:find}}).then(res=>{
                    this.books = res.data.data;
                });
                this.http.post("/api/bookslist",{page:0}).then(res=>{
                    this.category = res.data.category;
                    this.number = res.data.number;
                    this.statee = res.data.state;
                })
            }else{
                this.http.post("/api/bookslist",{page:0}).then(res=>{
                    // console.dir(res.data);
                    this.books = res.data.data;
                    this.category = res.data.category;
                    this.number = res.data.number;
                    this.statee = res.data.state;
                })
            }
            
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        width: 100%;
        top:0;
        z-index: 5;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .menu{
        color: #55BEC1;
        font-size: 20px;
    }
    .bar{
        position: fixed;
        height: 50px;
        width: 100%;
        top: 46px;
        z-index: 5;
        background-color: white;
        line-height: 50px;
        text-align: left;
        border-bottom: solid 1px #ddd;
    }
    .bar-list{
        display: inline-block;
        width: 20%;
        padding-left: 20px;
    }
    .menu{
        width: 13%;
        text-align: center;
        border-left: solid 2px #ddd;
    }
    .novel{
        display: flex;
        padding:16px;
        background-color: white;
        border-bottom: solid 1px #ddd;
        text-align: left;
    }
    .novel img{
        width: 80px;
        height: 110px;
        margin-right: 10px;
    }
    .novel-title{
        margin:10px 0;
        color: black;
    }
    .novel span{
        font-size: 14px;
        color: #777;
    }
    .novel-text{
        display: inline-block;
        margin-top: 10px;
        height: 17px;
        width: calc(100vw - 120px);
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .checked{
        color:#55BEC1 ;
        font-weight: bold;
    }
    .menu-name{
        font-size: 18px;
        font-weight: bold;
        line-height: 36px;
        width: 60px;
    }
    .menu-data{
        text-align: left;
    }
    .menu-data span{
        display: inline-block;
        margin: 5px 10px;
        padding: 2px 5px;
    }
    .menushow-leave-active{
        animation:  hidemenu ease 0.7s;
    }
    .menushow-enter-active{
        animation:  showmenu ease 0.7s;
    }
    .chosee{
        background-color: #F68175;
        font-size: 17px;
        color: white;
    }
    .goTop{
        width: 44px;
        height: 44px;
        padding-top: 5px;
        font-size: 20px;
        border-radius: 50%;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 100px;
        right: 12px;
    }
    .goTop p{
        margin: 0;
        padding-top: 2px;
        font-size: 9px;
    }
</style>